<template>

  <div>
    <el-form ref="loginForm"
             :model="loginForm"
             class="login-form"
             :rules="rules"
    >
      <h3 class="title">系统登录</h3>
      <!--用户名-->
      <el-form-item prop="username">

        <el-input v-model="loginForm.username" type="text" placeholder="账号" size="medium">
          <i class="el-icon-user-solid input-icon" slot="prefix"></i>
        </el-input>
      </el-form-item>
      <!--密码-->
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="密码" size="medium"
        >
          <i class="el-icon-lock input-icon" slot="prefix"></i>
        </el-input>
      </el-form-item>
      <!--验证码-->
      <el-form-item prop="code" >
        <el-input v-model="loginForm.code" type="text" placeholder="验证码" style="width: 63%;margin-top: 2px;" size="medium"
        >
          <i class="el-icon-picture-outline-round input-icon" slot="prefix"></i>
        </el-input>
        <div class="login-code">
          <img :src="captchaUrl" @click="updateCaptcha" style="height: 35px;width: 120px;margin-top: 2px;margin-left: -4px;">
        </div>
      </el-form-item>

      <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
        记住我
      </el-checkbox>

      <el-form-item
          style="width:100%;"
          v-loading="loading"
          element-loading-text="登录中..."
          element-loading-spinner="el-icon-loading"
      >
        <el-button type="primary" style="width:100%;" @click="submitLogin" >
          <span v-text="msg"></span>
        </el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>

// import Background from '@/assets/images/background.webp'


export default {
  name: "Login",
  data() {
    return {
      captchaUrl: '/captcha?time='+new Date(),
      loading : false,
      msg : "登 录",
      loginForm: {
        username: 'admin',
        password: "123",
        rememberMe: '',
        code: null
      },
      rules: {
        username: [{required: true, trigger: 'blur', message: '用户名不能为空'}],
        password: [{required: true, trigger: 'blur', message: '密码不能为空'}],
        code: [{required: true, trigger: 'blur', message: '验证码不能为空'}]
      },
    }
  },
  methods: {
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
            this.msg = '登录';
            this.loading = true;
            this.postRequest('/login',this.loginForm).then(resp=>{
              if (resp) {
                // 存储后端传过来的token
                const tokenStr = resp.obj.tokenHead+resp.obj.token;
                // 存到一个域中
                window.sessionStorage.setItem('tokenStr', tokenStr)

                this.loading = false;

                console.log('login')
                // 跳转首页
                // this.$router.replace('/home');
                // 先判断用户有没有输入地址的行为
                // 拿到路径
                let path = this.$route.query.redirect;
                // 页面跳转
                this.$router.replace((path == '/' || path == undefined) ? '/home' : path)
              } else {
                this.msg = '登录'
                this.loading = false;
              }
            })
        } else {
          this.$notify.error({
            title: '错误',
            message: '请填写所有字段'
          });
          return false;
        }
      });
    },
    updateCaptcha() {
      this.captchaUrl = '/captcha?time='+new Date();
    }
  }
}
</script>

<style rel="stylesheet/scss" scoped>
.login-form {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login-code {
  height: 30px;
  width: 33%;
  display: inline-block;
  height: 38px;
  float: right;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.input-icon {
  height: 39px;
  width: 14px;
  margin-left: 2px;
}
</style>